<template>
  <div class="service-view-container">
    <div class="left-menu-container" v-if="serviceSource.length > 0">
      <div class="nav-body">
        <bjTreeMenu :menuData="serviceSource"></bjTreeMenu>
      </div>
    </div>
    <div class="menu-body">
      <router-view
        v-if="showRouterView"
        class="animate__faster animate__animated animate__fadeIn"
      ></router-view>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { mapGetters } from "vuex";
import { flatTreeData } from "@/utils";
import { routes } from "@/router";
//树形菜单
import bjTreeMenu from "@/components/bj-tree-menu/index.vue";
export default {
  data() {
    return {
      showRouterView: true,
    };
  },
  components: {
    bjTreeMenu,
  },
  computed: {
    ...mapGetters(["serviceSource", "currentMenu"]),
  },
  watch: {
    currentMenu: {
      handler(val) {
        let { menuCode, path, isFrame, activeRule, openType } = val;
        let routerPath = "";
        if (!menuCode) {
          return;
        }
        if (menuCode.endsWith("HOME_PAGE")) {
          //首页
          routerPath = path;
        } else if (isFrame == 1) {
          //第三方外链
          if (!path || path == "/") {
            routerPath = `/NotFound`;
          } else {
            routerPath = `/iframe?openType=${openType}&url=${encodeURIComponent(
              path
            )}`;
          }
        } else if (path == "/developing") {
          routerPath = "/developing";
        } else {
          let flatData = flatTreeData(routes, "children");
          let hasRoute = flatData.find((v) => v.path == activeRule + path);
          if (hasRoute) {
            routerPath = activeRule + path;
          } else {
            routerPath = "/NotFound";
          }
        }
        //相同路由判断 【强制刷新 router-view】
        if (
          this.$route.path == routerPath &&
          routerPath != "/NotFound" &&
          routerPath != "/developing"
        ) {
          this.showRouterView = false;
          setTimeout((_) => {
            this.showRouterView = true;
          }, 50);
        }
      },
      immediate: true,
      deep: true,
    },
  },

  mounted() {},
  methods: {},
  destroyed() {},
};
</script>

<style lang="less" scoped>
.service-view-container {
  height: 100%;
  .flex();
  overflow: hidden;
  position: relative;
  .left-menu-container {
    height: 100%;
    width: 240px;
    transition: 0.2s;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    .nav-body {
      height: 100%;
      width: 260px;
      overflow: auto;
      overflow-x: hidden;
    }
  }
  .menu-body {
    flex: 1;
    height: 100%;
    overflow: hidden;
    transition: 0.2s;
    z-index: 99;
  }
}
</style>
